import {
  IExamQuestions,
  IExamType,
  IQuestionType,
  ISubject,
} from '@/utils/interface';
import React, { useEffect, useRef } from 'react';
import { useSelector, useDispatch, useHistory } from 'umi';
import styles from './watchQuestions.less';
import { Select, Form, Input, Button, message } from 'antd';
const watchQuestions: React.FC = () => {
<<<<<<< HEAD:项目代码/four_group_warehouse/src/pages/main/viewQuestion.tsx
    const selectAll = useRef(null)
    const dispatch = useDispatch()
    const history=useHistory()
    const { Option } = Select
    const editorLayout = {
        wrapperCol: { span: 20 }
    }
    useEffect(() => {
        dispatch({
            type: 'question/getQuestionType'
        })
        dispatch({
            type: 'question/getExamSubject'
        })
        dispatch({
            type: 'question/getExamType'
        })
        dispatch({
            type:'question/getExamQuestions'
        })
    }, [])
    const { subjects } = useSelector(module => (module as { question: { subjects: ISubject[] } }).question)
    const { examTypes } = useSelector(module => (module as { question: { examTypes: IExamType[] } }).question)
    const { questionTypes } = useSelector(module => (module as { question: { questionTypes: IQuestionType[] } }).question)
    const {examQuestions} = useSelector(module=>(module as {question:{examQuestions:IExamQuestions[]}}).question)
    function selectClass(e: React.MouseEvent<HTMLDivElement>) {
        if ((e.target as HTMLDivElement).tagName === 'SPAN') {
            if ((e.target as HTMLDivElement).classList.contains('active')) {
                (e.target as HTMLDivElement).classList.remove('active')
            } else {
                let arr = [...(selectAll.current as unknown as Element).querySelectorAll('span')];
                arr.forEach(item => item.classList.remove('active'));
                (e.target as HTMLDivElement).classList.add('active')
            }
        }
        if ((e.target as HTMLDivElement).tagName === 'P') {
            let arr = [...(selectAll.current as unknown as Element).querySelectorAll('span')]
            if ((e.target as HTMLDivElement).classList.contains('active')) {
                (e.target as HTMLDivElement).classList.remove('active')
                arr.forEach(item => item.classList.remove('active'))
            } else {
                (e.target as HTMLDivElement).classList.add('active')
                arr.forEach((item) => {
                    item.classList.add('active')
                })
            }
        }
    }
    function onFinish(value:{exam_id:string,questions_type_id:string}){
        let spans = [...(selectAll.current as unknown as Element).querySelectorAll('span.active')][0]
        let subject_id=(spans as HTMLElement).dataset.id
        let values={}
        values={
            ...value,
            subject_id
=======
  const selectAll = useRef(null);
  const dispatch = useDispatch();
  const history = useHistory();
  const { Option } = Select;
  const editorLayout = {
    wrapperCol: { span: 20 },
  };
  useEffect(() => {
    dispatch({
      type: 'question/getQuestionType',
    });
    dispatch({
      type: 'question/getExamSubject',
    });
    dispatch({
      type: 'question/getExamType',
    });
    dispatch({
      type: 'question/getExamQuestions',
    });
  }, []);
  const { subjects } = useSelector(
    (module) => (module as { question: { subjects: ISubject[] } }).question,
  );
  const { examTypes } = useSelector(
    (module) => (module as { question: { examTypes: IExamType[] } }).question,
  );
  const { questionTypes } = useSelector(
    (module) =>
      (module as { question: { questionTypes: IQuestionType[] } }).question,
  );
  const { examQuestions } = useSelector(
    (module) =>
      (module as { question: { examQuestions: IExamQuestions[] } }).question,
  );
  function selectClass(e: React.MouseEvent<HTMLDivElement>) {
    if ((e.target as HTMLDivElement).tagName === 'SPAN') {
      let p = ((selectAll.current as unknown) as Element).querySelectorAll(
        'p',
      )[0];
      let arr = [
        ...((selectAll.current as unknown) as Element).querySelectorAll('span'),
      ];
      if (((p as unknown) as Element).classList.contains('active')) {
        ((p as unknown) as Element).classList.remove('active');
        arr.forEach((item) => item.classList.remove('active'));
        (e.target as HTMLDivElement).classList.add('active');
      } else {
        if ((e.target as HTMLDivElement).classList.contains('active')) {
          (e.target as HTMLDivElement).classList.remove('active');
        } else {
          let arr = [
            ...((selectAll.current as unknown) as Element).querySelectorAll(
              'span',
            ),
          ];
          arr.forEach((item) => item.classList.remove('active'));
          (e.target as HTMLDivElement).classList.add('active');
>>>>>>> 6801ff71268e10758d0eab903f2d851036f102dd:项目代码/liuexam_cms/src/pages/main/viewQuestion.tsx
        }
      }
    }
    if ((e.target as HTMLDivElement).tagName === 'P') {
      let arr = [
        ...((selectAll.current as unknown) as Element).querySelectorAll('span'),
      ];
      if ((e.target as HTMLDivElement).classList.contains('active')) {
        (e.target as HTMLDivElement).classList.remove('active');
        arr.forEach((item) => item.classList.remove('active'));
      } else {
        (e.target as HTMLDivElement).classList.add('active');
        arr.forEach((item) => {
          item.classList.add('active');
        });
      }
    }
  }
  function onFinish(value: { exam_id: string; questions_type_id: string }) {
    let spans = [
      ...((selectAll.current as unknown) as Element).querySelectorAll(
        'span.active',
      ),
    ][0];
    let subject_id = (spans as HTMLElement).dataset.id;
    let values = {};
    values = {
      ...value,
      subject_id,
    };
    console.log(values);
    dispatch({
      type: 'question/getCondition',
      payload: values,
    });
  }
  function pushQuestion(item: IExamQuestions) {
    history.push({
      pathname: '/main/questionDetail',
      state: item,
    });
  }
  function pushCompile(item: IExamQuestions) {
    history.push({
      pathname: '/main/compileDetail',
      state: item,
    });
  }

  return (
    <div className={styles.wrap}>
      <h1>查看试题</h1>
      <div className={styles.cotent}>
        <div className={styles.class}>
          <p>课程类型:</p>
          <div onClick={selectClass} ref={selectAll}>
            <p>All</p>
            {subjects?.map((item) => {
              return (
                <span key={item.subject_id} data-id={item.subject_id}>
                  {item.subject_text}
                </span>
              );
            })}
          </div>
        </div>
        <div className={styles.bodys}>
          <Form onFinish={onFinish}>
            <div>
              <label htmlFor="">考试类型：</label>
              <Form.Item name="exam_id" {...editorLayout}>
                <Select style={{ width: 250 }}>
                  {(examTypes as IExamType[]).map((item) => {
                    return (
                      <Option key={item.exam_id} value={item.exam_id}>
                        {item.exam_name}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>
            <div>
              <label htmlFor="">题目类型：</label>
              <Form.Item name="questions_type_id" {...editorLayout}>
                <Select style={{ width: 250 }}>
                  {(questionTypes as IQuestionType[]).map((item) => {
                    return (
                      <Option
                        key={item.questions_type_id}
                        value={item.questions_type_id}
                      >
                        {item.questions_type_text}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>
            <Button type="primary" htmlType="submit" className={styles.btn}>
              查询
            </Button>
          </Form>
        </div>
      </div>
      <div className={styles.footer}>
        {examQuestions.map((item, index) => {
          return (
            <div key={index}>
              <div
                onClick={() => {
                  pushQuestion(item);
                }}
                className={styles.items}
              >
                <p> {item.title}</p>
                <div className={styles.spans}>
                  <span>{item.questions_type_text}</span>
                  <span>{item.subject_text}</span>
                  <span>{item.exam_name}</span>
                </div>
                <div className={styles.p}>{item.user_name} 发布</div>
              </div>
              <div
                className={styles.compile}
                onClick={() => {
                  pushCompile(item);
                }}
              >
                编辑
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default watchQuestions;
